<template>
	<view class="container p-bottom" v-if="detail.order_goods_id">
		<form @submit="onSubmit" report-submit>
			<!-- 商品详情 -->
			<form @submit="onGoodsDetail" report-submit="true" :data-id="detail.goods_id">
				<button class="btn-normal" formType="submit">
					<view class="goods-detail b-f dis-flex flex-dir-row">
						<view class="left"><image class="goods-image" :src="detail.image.file_path"></image></view>
						<view class="right dis-flex flex-box flex-dir-column flex-x-around">
							<view class="goods-name">
								<text class="twolist-hidden">{{ detail.goods_name }}</text>
							</view>
							<view class="dis-flex col-9 f-24">
								<view class="flex-box">{{ detail.goods_attr }}</view>
								<text class="t-r">×{{ detail.total_num }}</text>
							</view>
						</view>
					</view>
				</button>
			</form>

			<!-- 服务类型 -->
			<view class="row-service b-f m-top20">
				<view class="row-title">服务类型</view>
				<view class="service-switch dis-flex">
					<form @submit="onSwitchService" report-submit="true" data-type="10">
						<button class="btn-normal" formType="submit"><view class="switch-item " :class="{ active: serviceType == 10 }">退货退款</view></button>
					</form>
					<form @submit="onSwitchService" report-submit="true" data-type="20">
						<button class="btn-normal dis-flex" formType="submit"><view class="switch-item " :class="{ active: serviceType == 20 }">换货</view></button>
					</form>
				</view>
			</view>

			<!-- 申请原因 -->
			<view class="row-textarea b-f m-top20">
				<view class="row-title">申请原因</view>
				<view class="content"><textarea name="content" maxlength="2000" placeholder="请详细填写申请原因，注意保持商品的完好，建议您先与卖家沟通" placeholderStyle="color:#ccc"></textarea></view>
			</view>

			<!-- 退款金额 -->
			<view v-if="serviceType == 10" class="row-money b-f m-top20 dis-flex">
				<view class="row-title">退款金额</view>
				<view class="money col-m">￥{{ detail.total_pay_price }}</view>
			</view>

			<!-- 上传凭证 -->
			<view class="row-voucher b-f m-top20">
				<view class="row-title">上传凭证 (最多6张)</view>
				<view class="image-list">
					<!-- 图片列表 -->
					<view class="image-preview" v-for="(imagePath, imageIndex) in imageList" :key="imageIndex">
						<text class="image-delete iconfont icon-shanchu" @tap.stop="deleteImage" :data-index="imageIndex" :data-image-index="imageIndex"></text>
						<image mode="aspectFill" :src="imagePath"></image>
					</view>
					<!-- 上传图片 -->
					<form v-if="imageList.length < 6" @submit="chooseImage" report-submit="true">
						<button class="btn-normal" formType="submit">
							<view class="image-picker dis-flex flex-dir-column flex-x-center flex-y-center">
								<text class="choose__icon iconfont icon-tubiao_xiangji"></text>
								<text class="choose__text">上传图片</text>
							</view>
						</button>
					</form>
				</view>
			</view>

			<view class="flow-fixed-footer b-f">
				<button class="btn-normal" formType="submit"><view class="flow-btn f-32">确认提交</view></button>
			</view>
		</form>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
export default {
	data() {
		return {
			// 订单商品id
			order_goods_id: null,

			// 订单商品详情
			detail: {},

			// 图片列表
			imageList: [],

			// 服务类型
			serviceType: 10,
			disable: false
		};
	},
	onLoad: function(options) {
		// 记录页面参数
		this.order_goods_id = options.order_goods_id;
	},
	onShow() {
		// 获取订单商品详情
		this.getGoodsDetail();
	},
	methods: {
		/**
		 * 获取订单商品详情
		 */
		getGoodsDetail() {
			this.$get(this.$api.applySharingRefund, { order_goods_id: this.order_goods_id }, res => {
				this.detail = res.data.detail;
			});
		},
		/**
		 * 切换标签
		 */
		onSwitchService(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			this.serviceType = e.currentTarget.dataset.type;
		},
		/**
		 * 跳转商品详情
		 */
		onGoodsDetail(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../../../goods/index?goods_id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 选择图片
		 */
		chooseImage(e) {
			let index = e.currentTarget.dataset.index;
			let imageList = this.imageList;
			// 记录formId
			this.$saveFormId(e.detail.formId);
			// 选择图片
			uni.chooseImage({
				count: 6 - imageList.length,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					this.imageList = imageList.concat(res.tempFilePaths);
				}
			});
		},
		/**
		 * 删除图片
		 */
		deleteImage: function(e) {
			this.imageList.splice(e.currentTarget.dataset.imageIndex, 1);
		},
		/**
		 * 表单提交
		 */
		onSubmit: function(e) {
			if (!e.detail.value.content) {
				Tools.showError('申请原因不能为空');
				return false;
			}

			// 判断是否重复提交
			if (this.disable === true) {
				return false;
			}
			// 表单提交按钮设为禁用 (防止重复提交)
			this.disable = true;

			uni.showLoading({
				title: '正在处理...',
				mask: true
			});

			// form参数
			let postParams = {
				order_goods_id: this.order_goods_id,
				type: this.serviceType,
				content: e.detail.value.content
			};

			// form提交执行函数
			let fromPostCall = params => {
				this.$post(
					this.$api.applySharingRefund,
					params,
					res => {
						if (res.code === 1) {
							Tools.showSuccess(res.msg, () => {
								// 跳转售后管理页面
								Route.navigateTo({
									url: '../index'
								});
							});
						} else {
							Tools.showError(res.msg);
						}
					},
					false,
					() => {
						uni.hideLoading();
						this.disable = false;
					}
				);
			};

			// 统计图片数量
			let imagesLength = this.imageList.length;

			// 判断是否需要上传图片
			imagesLength > 0 ? this.uploadFile(imagesLength, fromPostCall, postParams) : fromPostCall(postParams);
		},
		/**
		 * 上传图片
		 */
		uploadFile(imagesLength, callBack, formData) {
			let uploaded = [];
			// 文件上传
			let i = 0;
			this.imageList.forEach((filePath, fileKey) => {
				this.$upload(
					this.$api.uploadImage,
					filePath,
					fileKey,
					{},
					res => {
						uploaded[fileKey] = res.data.file_id;
					},
					null,
					() => {
						i++;
						if (imagesLength === i) {
							// 所有文件上传完成
							console.log('upload complete');
							// 执行回调函数
							formData['images'] = uploaded;
							// 执行回调函数
							callBack && callBack(formData);
						}
					}
				);
			});
		}
	}
};
</script>

<style>
.container {
	font-size: 28rpx;
}

.row-title {
	color: #888;
	margin-bottom: 20rpx;
}

.goods-detail {
	padding: 24rpx 20rpx;
}

.goods-detail .left .goods-image {
	display: block;
	width: 150rpx;
	height: 150rpx;
}

.goods-detail .right {
	padding-left: 20rpx;
}

/* 服务类型 */

.row-service {
	padding: 24rpx 20rpx;
}

.service-switch .switch-item {
	height: 38rpx;
	line-height: 38rpx;
	padding: 10rpx 30rpx;
	margin-right: 25rpx;
	border-radius: 10rpx;
	border: 1px solid rgb(177, 177, 177);
	color: #888;
}

.service-switch .switch-item.active {
	color: #fc1e56;
	border: 1px solid #fc1e56;
}

/* 申请原因 */

.row-textarea {
	padding: 24rpx 20rpx;
}

.row-textarea textarea {
	width: 100%;
	height: 220rpx;
	padding: 12rpx;
	border: 1rpx solid #e8e8e8;
	border-radius: 5rpx;
	box-sizing: border-box;
}

/* 退款金额 */

.row-money {
	padding: 24rpx 20rpx;
}

.row-money .row-title {
	margin-bottom: 0;
	margin-right: 30rpx;
}

/* 上传凭证 */

.row-voucher {
	padding: 24rpx 20rpx;
}

.row-voucher .image-list:after {
	clear: both;
	content: ' ';
	display: table;
}

.row-voucher .image-list image {
	display: block;
	width: 150rpx;
	height: 150rpx;
}

.row-voucher .image-list .image-picker {
	width: 150rpx;
	height: 150rpx;
	border: 1rpx dashed #ccc;
	color: #ccc;
}

.row-voucher .image-list .image-picker .choose__icon {
	font-size: 56rpx;
	margin-bottom: 6rpx;
}

.row-voucher .image-list .image-picker .choose__text {
	font-size: 22rpx;
}

.row-voucher .image-list .image-picker,
.image-list .image-preview {
	margin: 15rpx 30rpx 15rpx 0;
	float: left;
}

.row-voucher .image-list .image-picker:nth-child(4n + 0),
.row-voucher .image-list .image-preview:nth-child(4n + 0) {
	margin-right: 0;
}

.row-voucher .image-list .image-preview {
	position: relative;
}

.row-voucher .image-list .image-preview .image-delete {
	position: absolute;
	top: -15rpx;
	right: -15rpx;
	height: 42rpx;
	width: 42rpx;
	line-height: 42rpx;
	background: rgba(0, 0, 0, 0.64);
	border-radius: 50%;
	color: #fff;
	font-weight: bolder;
	font-size: 22rpx;
	z-index: 10;
	text-align: center;
}
</style>
